<script>
import GoodsList from '@/components/Sample/GoodsList.vue';
import GoodsNav from '@/components/Sample/GoodsNav.vue';

export default{
    components:{
        GoodsNav,
        GoodsList
    },
    data() {
        //父组件向子组件传递图片，传的是绝对路径，但如果我们真的直接写绝对路径，那么在传递时会加上ip和端口号，页面上无法进行反问，可以通过加require解决这个问题
        return {
            goods:[{id:'001',name:'香草冰淇淋',cid:'1',src:require('../assets/logo.png')},
            {id:'002',name:'草莓冰淇淋',cid:'1',src:require('../assets/logo.png')},
            {id:'003',name:'巧克力冰淇淋',cid:'1',src:require('../assets/logo.png')},
            {id:'004',name:'可颂面包',cid:'2',src:require('../assets/logo.png')},
            {id:'005',name:'牛奶吐司',cid:'2',src:require('../assets/logo.png')},
            {id:'006',name:'德芙',cid:'3',src:require('../assets/logo.png')},
            {id:'007',name:'好时',cid:'3',src:require('../assets/logo.png')}
            ],
            list:[]//添加list用来接受商品数据
        }
    },
    mounted(){
        this.list=this.goods.slice()
    },
    methods:{
        handle(val){
            this.list=this.goods.filter(v=>v.cid==val)
        }
    }
}
</script>

<template>
    <div style="width:600px;margin:auto;">
        <h1>实例：商品导航和商品列表组件间的通讯</h1>   
        <div style="float:left;width:20%;background-color:aqua">
            <GoodsNav @handle="handle"></GoodsNav>
        </div>
        <div style="float:left;width:80%;">
            <GoodsList :list="list"></GoodsList>
        </div>
    </div>
</template>